<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <view class="back-btn" @click="goBack">
            <text class="fas fa-arrow-left"></text>
          </view>
          <text class="header-title">清运管理</text>
        </div>
        <div class="header-right">
          <view class="scan-btn" @click="scanCleanup">
            <text class="fas fa-qrcode"></text>
            <text class="scan-text">扫码清运</text>
          </view>
        </div>
      </div>
    </header>

    <!-- 标签页切换 -->
    <view class="tabs-container">
      <view class="tabs">
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'pending' }"
          @click="switchTab('pending')"
        >
          <text class="tab-text">待清运</text>
          <view class="tab-indicator" v-if="activeTab === 'pending'"></view>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'orders' }"
          @click="switchTab('orders')"
        >
          <text class="tab-text">清运订单</text>
          <view class="tab-indicator" v-if="activeTab === 'orders'"></view>
        </view>
      </view>
    </view>

    <!-- 日期筛选区域 -->
    <view class="date-filter-container" v-if="activeTab === 'orders'">
      <view class="date-filter">
        <view class="date-item">
          <picker mode="date" :value="startDate" @change="onStartDateChange">
            <view class="date-picker">
              <text class="date-text">{{ startDate }}</text>
              <text class="fas fa-calendar-alt date-icon"></text>
            </view>
          </picker>
        </view>
        <view class="date-item">
          <picker mode="date" :value="endDate" @change="onEndDateChange">
            <view class="date-picker">
              <text class="date-text">{{ endDate }}</text>
              <text class="fas fa-calendar-alt date-icon"></text>
            </view>
          </picker>
        </view>
        <view class="filter-btn" @click="filterOrders">
          <text class="fas fa-search"></text>
          <text class="filter-text">筛选</text>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content" :class="{ 'with-filter': activeTab === 'orders' }">
      <!-- 待清运列表 -->
      <view v-if="activeTab === 'pending'" class="pending-list">
        <view 
          v-for="device in pendingDevices" 
          :key="device.id"
          class="device-card"
          @click="goToDeviceDetail(device.id)"
        >
          <view class="card-header">
            <view class="device-info">
              <text class="device-name">{{ device.name }}</text>
              <text class="device-location">{{ device.location }}</text>
            </view>
            <view class="status-badge" :class="device.status">
              <text class="status-text">{{ getStatusText(device.status) }}</text>
            </view>
          </view>
          
          <view class="card-content">
            <view class="info-row-compact">
              <text class="info-compact">重量: <text class="info-value weight">{{ device.weight }}KG</text></text>
              <text class="info-compact">容量: <text class="info-value">{{ device.fillPercentage }}%</text></text>
              <text class="info-compact">上次清运: <text class="info-value">{{ device.lastCleanup }}</text></text>
            </view>
          </view>
          

        </view>
        
        <!-- 空状态 -->
        <view v-if="pendingDevices.length === 0" class="empty-state">
          <text class="fas fa-inbox empty-icon"></text>
          <text class="empty-text">暂无待清运设备</text>
        </view>
      </view>

      <!-- 清运订单列表 -->
      <view v-if="activeTab === 'orders'" class="orders-list">
        <view 
          v-for="order in cleanupOrders" 
          :key="order.id"
          class="order-card"
        >
          <view class="card-header">
            <view class="order-info">
              <text class="order-number">订单号：{{ order.orderNumber }}</text>
              <text class="order-date">{{ order.date }}</text>
            </view>
            <view class="order-status completed">
              <text class="status-text">已完成</text>
            </view>
          </view>
          
          <view class="card-content">
            <view class="order-info-compact">
              <text class="device-name-compact">{{ order.deviceName }}</text>
              <text class="device-location-compact">{{ order.deviceLocation }}</text>
              <view class="order-details-compact">
                <text class="detail-compact">重量: <text class="detail-value">{{ order.weight }}KG</text></text>
                <text class="detail-compact">时间: <text class="detail-value">{{ order.cleanupTime }}</text></text>
              </view>
              <view class="order-details-compact">
                <text class="detail-compact">回收箱编号: <text class="detail-value">{{ order.recycleBoxNumber }}</text></text>
                <text class="detail-compact">布袋编号: <text class="detail-value">{{ order.bagNumber }}</text></text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="cleanupOrders.length === 0" class="empty-state">
          <text class="fas fa-file-alt empty-icon"></text>
          <text class="empty-text">暂无清运订单</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      startDate: '',
      endDate: '',
      pendingDevices: [
        {
          id: 1,
          name: '智能回收箱-001',
          location: '科技园A座门口',
          weight: 45.2,
          capacity: 50,
          fillPercentage: 90,
          status: 'full',
          lastCleanup: '2天前',
          expectedIncome: '27.12'
        },
        {
          id: 2,
          name: '智能回收箱-002',
          location: '办公楼B栋1楼',
          weight: 38.5,
          capacity: 50,
          fillPercentage: 77,
          status: 'full',
          lastCleanup: '1天前',
          expectedIncome: '23.10'
        },
        {
          id: 3,
          name: '智能回收箱-003',
          location: '员工餐厅旁',
          weight: 42.8,
          capacity: 50,
          fillPercentage: 86,
          status: 'full',
          lastCleanup: '3天前',
          expectedIncome: '25.68'
        }
      ],
      cleanupOrders: [
        {
          id: 1,
          orderNumber: 'CY202409240001',
          deviceName: '智能回收箱-005',
          deviceLocation: '研发中心C座',
          weight: 48.5,
          income: '29.10',
          date: '2024-09-23',
          cleanupTime: '14:30',
          recycleBoxNumber: 'RB-005-2024',
          bagNumber: 'BG-20240923-001'
        },
        {
          id: 2,
          orderNumber: 'CY202409230002',
          deviceName: '智能回收箱-004',
          deviceLocation: '行政楼1楼大厅',
          weight: 46.2,
          income: '27.72',
          date: '2024-09-22',
          cleanupTime: '16:15',
          recycleBoxNumber: 'RB-004-2024',
          bagNumber: 'BG-20240922-002'
        },
        {
          id: 3,
          orderNumber: 'CY202409220003',
          deviceName: '智能回收箱-006',
          deviceLocation: '停车场入口',
          weight: 44.8,
          income: '26.88',
          date: '2024-09-21',
          cleanupTime: '10:45',
          recycleBoxNumber: 'RB-006-2024',
          bagNumber: 'BG-20240921-003'
        }
      ]
    }
  },
  onLoad() {
    // 设置默认日期范围为最近7天
    this.setDefaultDateRange();
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 扫码清运
    scanCleanup() {
      uni.navigateTo({
        url: '/pages/cleanup/scan'
      });
    },
    
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab;
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'full': '已满',
        'high': '较满',
        'normal': '正常'
      };
      return statusMap[status] || '正常';
    },
    
    // 设置默认日期范围
    setDefaultDateRange() {
      const today = new Date();
      const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
      
      this.endDate = this.formatDate(today);
      this.startDate = this.formatDate(sevenDaysAgo);
    },
    
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 开始日期变化
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    
    // 结束日期变化
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    
    // 筛选订单
    filterOrders() {
      uni.showLoading({
        title: '筛选中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '筛选完成',
          icon: 'success'
        });
        // 这里可以根据日期范围筛选订单数据
      }, 1000);
    },
    
    // 跳转到设备详情
    goToDeviceDetail(deviceId) {
      uni.navigateTo({
        url: `/pages/devices/detail?id=${deviceId}`
      });
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #f6ffed, #f6ffed);
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.back-btn .fas {
  font-size: 24rpx;
  color: #1D2129;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
}

.header-right {
  display: flex;
  align-items: center;
}

.scan-btn {
  display: flex;
  align-items: center;
  background-color: #165DFF;
  padding: 12rpx 20rpx;
  border-radius: 20rpx;
}

.scan-btn .fas {
  font-size: 24rpx;
  color: #fff;
  margin-right: 8rpx;
}

.scan-text {
  font-size: 24rpx;
  color: #fff;
}

/* 标签页 */
.tabs-container {
  position: fixed;
  top: 88rpx;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 998;
  border-bottom: 1rpx solid #F2F3F5;
}

.tabs {
  display: flex;
  padding: 0 30rpx;
}

.tab-item {
  flex: 1;
  position: relative;
  padding: 30rpx 0;
  text-align: center;
}

.tab-text {
  font-size: 28rpx;
  color: #86909C;
  transition: color 0.3s ease;
}

.tab-item.active .tab-text {
  color: #165DFF;
  font-weight: bold;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #165DFF;
  border-radius: 2rpx;
}

/* 日期筛选区域 */
.date-filter-container {
  position: fixed;
  top: 176rpx;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 997;
  border-bottom: 1rpx solid #F2F3F5;
}

.date-filter {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  gap: 20rpx;
}

.date-item {
  flex: 1;
}

.date-label {
  font-size: 20rpx;
  color: #86909C;
  margin-bottom: 8rpx;
  display: block;
}

.date-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 20rpx;
  background-color: #F2F3F5;
  border-radius: 12rpx;
}

.date-text {
  font-size: 24rpx;
  color: #1D2129;
}

.date-icon {
  font-size: 20rpx;
  color: #86909C;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 24rpx;
  background-color: #165DFF;
  border-radius: 12rpx;
  gap: 8rpx;
}

.filter-btn .fas {
  font-size: 20rpx;
  color: #fff;
}

.filter-text {
  font-size: 24rpx;
  color: #fff;
}

/* 内容区域 */
.content {
  padding: 208rpx 30rpx 30rpx;
}

.content.with-filter {
  padding-top: 308rpx;
}

/* 设备卡片 */
.device-card, .order-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.device-info, .order-info {
  flex: 1;
}

.device-name, .order-number {
  font-size: 28rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 8rpx;
}

.device-location, .order-date {
  font-size: 24rpx;
  color: #86909C;
}

.status-badge, .order-status {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
}

.status-badge.full {
  background-color: rgba(245, 63, 63, 0.1);
  color: #F53F3F;
}

.status-badge.high {
  background-color: rgba(255, 125, 0, 0.1);
  color: #FF7D00;
}

.status-badge.normal {
  background-color: rgba(0, 180, 42, 0.1);
  color: #00B42A;
}

.order-status.completed {
  background-color: rgba(0, 180, 42, 0.1);
  color: #00B42A;
}

.card-content {
  margin-bottom: 0;
}

.info-row-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-compact {
  font-size: 22rpx;
  color: #86909C;
  flex: 1;
  text-align: center;
}

.info-value {
  font-size: 22rpx;
  color: #1D2129;
  font-weight: bold;
}

.info-value.weight {
  color: #165DFF;
}

.info-value.income {
  color: #00B42A;
}

.card-footer {
  border-top: 1rpx solid #F2F3F5;
  padding-top: 20rpx;
}

.progress-container {
  display: flex;
  align-items: center;
}

.progress-bar {
  flex: 1;
  height: 8rpx;
  background-color: #F2F3F5;
  border-radius: 4rpx;
  margin-right: 20rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #1D2129;
  font-weight: bold;
}

/* 订单信息紧凑布局 */
.order-info-compact {
  display: flex;
  flex-direction: column;
}

.device-name-compact {
  font-size: 28rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 8rpx;
}

.device-location-compact {
  font-size: 22rpx;
  color: #86909C;
  margin-bottom: 12rpx;
}

.order-details-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.order-details-compact:last-child {
  margin-bottom: 0;
}

.detail-compact {
  font-size: 22rpx;
  color: #86909C;
  flex: 1;
  text-align: center;
}

.detail-value {
  font-size: 22rpx;
  color: #1D2129;
  font-weight: bold;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  color: #C9CDD4;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #86909C;
}
</style>